<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>指令语法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- Vue模板语法有两大类
         1.插值语法：
            功能：用于解析标签体内容。
            写法：{{XXX}}，xxx是js表达式且可以直接读取到data中的所有属性
         2.指令语法：
            功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。）
            举例：v-bind:href="xxx" 或简写 :href="xxx"，xxx同样写js表达式，可以直接读取到data中的所有属性
            备注：vue有很多指令语法：v-for v-model等等，v-bind只是其中一个-->
        <!-- 准备好一个容器，名字是root -->
        <div id="root">
            <h1>插值语法</h1>
            <h3>你好，{{name}}</h3>
            <hr/>
            <h1>指令语法</h1>
            <!-- 加了v-bind之后，相当于是一个js表达式，读取url这个变量，可以简写成: -->
            <a v-bind:href="user.url" v-bind:aa="aaaaa">{{user.name}}，快百度一下</a>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 创建Vue实例
            new Vue({
                el:'#root', // el用于指定当前Vue实例为哪个容器服务，就是id选择器，如果上面是class = 'root',那这里就是el:'.root'
                //el:document.getElementById('root') //和上面是一样的
                data:{  //data中用于存储数据，数据供el所指定的容器去使用
                    name:'张三',
                    user:{
                        name:'李四',
                        url:'http://www.baidu.com'
                    },
                    aaaaa:'你好'
                }
            })
        </script>

        
    </body>
</html>